<template>
  <div>
    <van-nav-bar title="爱尔眼科" class="nav">
      <template #right>
        <van-icon name="more-o" size="24" class="icon" />
      </template>
    </van-nav-bar>

    <van-form validate-first @failed="onFailed">
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        required
        v-model="userName"
        name="userName"
        placeholder="请输入姓名"
        label="姓名"
        :rules="[
          { pattern: /^[\u4e00-\u9fa5]{2,4}$/, message: '请输入正确的姓名' },
        ]"
      />

      <van-field
        required
        v-model="age"
        name="age"
        placeholder="请输入年龄"
        label="年龄"
        :rules="[
          {
            pattern: /^(?:[1-9][0-9]?|1[01][0-9]|120)$/,
            message: '年龄是1-120之间有效',
          },
        ]"
      />

      <!-- <van-field
        required
        v-model="phone"
        name="phone"
        placeholder="请输入手机号"
        label="就诊人电话"
        :rules="[
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号',
          },
        ]"
      /> -->

      <!-- 预约项目下拉选框 -->
      <van-field
        readonly
        clickable
        name="picker"
        :value="clinic"
        label="预约项目"
        placeholder="点击选择项目"
        @click="showClinic = true"
      />
      <van-popup v-model="showClinic" position="bottom">
        <van-picker
          show-toolbar
          :columns="clinic_columns"
          @click="onClinic"
          @confirm="onClinic"
          @cancel="showClinic = false"
        />
      </van-popup>

      <!-- 预约日期 -->
      <van-field
        readonly
        clickable
        name="calendar"
        :value="date"
        label="预约日期"
        placeholder="点击选择日期"
        @click="showDate = true"
      />
      <van-calendar
        color="#36c14c"
        title="预约日期"
        v-model="showDate"
        @confirm="onDate"
      />

      <van-field v-model="description" name="description" label="病情描述" />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          @click="onSubmit"
          native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>

    <van-tabbar v-model="active">
      <van-tabbar-item to="/detailsList" icon="description"
        >诊疗详情</van-tabbar-item
      >
      <van-tabbar-item icon="todo-list-o">预约挂号</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      userName: "",
      age: "",
      // phone: "",
      description: "",

      //预约项目选择
      clinic: "",
      clinic_columns: [],
      showClinic: false,
      //   预约日期
      date: "",
      showDate: false,
      active: 1,
      userID: null,
    };
  },
  computed: {
    ...mapState("user", [
      "loginStatus",
      "userInfo",
      "urlSrcAdd",
      "urlSrcDefaul",
    ]),
  },
  mounted() {
    this.userID = this.userInfo.userid;
    this.onClinic();
    // this.getExamine()
  },
  methods: {
    onSubmit(values) {
      // console.log("submit", values);
      let url = `/registration/addReg`;
      let params = `userid=${this.userID}&username=${this.userName}&age=${this.age}&clinic_title=${this.clinic}&date=${this.date}&description=${this.description}`;
      if (this.userID == null) {
        this.$dialog.alert({
          message: "请先登录~~~",
        });
        this.userName='';
        this.age='';
        this.description=''
        this.clinic=''
        this.date=''
        return;
      }
      this.axios.post(url, params).then((res) => {
        console.log("2333", res);
        console.log(this.userID);

        (this.userName = ""),
          (this.age = ""),
          // phone: "",
          (this.description = ""),
          (this.clinic = ""),
          (this.date = ""),
          this.onClinic();
      });
    },

    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    },

    onClinic(value) {
      let url = `/clinic/project`;
      this.axios.get(url).then((res) => {
        res.data.forEach((item, index) => {
          // console.log(item.clinic_title);
          let title = item.clinic_title;
          //  console.log(item[index]);
          this.clinic_columns.push(title);
          this.clinic = value;
        });
      });
      this.showClinic = false;
    },
    onDate(date) {
      this.date = this.moment(date).format("YYYY-MM-DD");
      this.showDate = false;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar__title {
  color: #fff;
}
.nav {
  background-color: #36c14c;
  .icon {
    color: #fff;
  }
}
.van-button--info {
  background-color: #36c14c;
  border-color: #36c14c;
}
.van-tabbar-item--active {
  color: #36c14c;
}
</style>